<template>
  <main class="max-width-1400 am-center am-margin-top">
    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-3">
        <div class="dg-panel am-padding am-cf">
          <span class="am-fl">当前周期榜单</span>
          <span class="am-fr">01</span>
        </div>
        <div class="dg-panel am-margin-top">
          <header class="am-padding" style="border-bottom: 1px solid #EFEFEF;">
            作品榜单
          </header>
          
          <ul class="dg-class">
            <!-- <li class="dgactive">总榜</li> -->
             <li v-for="(sub,index2) in subChoices" :key="index2" v-bind:class="{dgactive:index2==isactive}"  @click="AdminworksCay(sub.id,index2)">
               {{sub.name}}
            </li>
            <!-- <li>简约</li>
            <li>简欧</li>
            <li>中式</li>
            <li>混搭</li>
            <li>欧式</li>
            <li>现代</li>
            <li>古典</li> -->
          </ul>
        </div>
      </div>

      <!-- 作品列表 -->
      <div :class="['am-u-sm-12', 'am-u-md-9', { 'am-margin-top': !isThumbFl }]">
        <header class="am-padding dg-panel" style="border-bottom: 1px solid #EFEFEF;">
          作品总榜
        </header>

        <div class="dg-body am-padding"
          v-for="(works, index) in worksData" :key="index">
          <div class="am-g">
            <!-- 票数 -->
            <div class="am-u-sm-2 am-text-center" style="padding-top: 6%;">
              <span class="am-text-xxxl am-block">{{works.Ranking}}</span> 
              <small class="am-block dg-text-gray">热度</small>
              <span>{{works.clicksNum}}</span>
            </div>
            <!-- 缩略图 -->
            <div class="am-u-sm-10">
              <div :class="['am-margin-right', 'dg-thumb', { 'am-fl': isThumbFl }]">
                <!-- <img src="/static/small12.jpg" class="am-img-responsive" alt=""> -->
              <a @click="actionWorksDetail(works.worksID)"><img :src="thumbnail+works.mainPic" class="am-img-responsive" alt=""></a>
              </div>

              <!-- 基本信息 -->
              <p class="am-text-xl">{{works.worksName}}</p>
              <div class="dg-text-gray">{{works.introduction}}</div>

              <!-- 作者信息、查看详情 -->
              <div :class="['am-inline-block', isThumbFl ? 'dg-dsg-info' : 'am-margin-top']">
                <!-- <div class="head-img">  
                  <img :src="'/static/'+works.HeadImagePath" class="am-circle am-img-responsive" alt="">
                </div>
                <div>{{works.designerName}}</div> -->
                <div class="dg-text-gray">{{works.createdOn}}</div>
              </div>

              <div class="dg-detail am-margin-right">
               <a  @click="actionWorksDetail(works.worksID)"> 查看详情</a>
              </div>
            </div>
          </div>
        </div>
              <!--分页组件-->
         <v-pagination :total="total" :current-page='current' @pagechange="pagechange" :display="display"></v-pagination>
      </div>
    </div>
  </main>
</template>

<script>
const MAX_WIDTH = 780;
const MAX_WIDTH_850 = 850;

import Vue from 'vue'
import Header from '@/dg_components/DgHeader'
import DgFooter from '@/views2/Footer'// 底部
import pagination from '@/dg_components/pagination'
export default {
  name: 'excellent-case',
  data() {
    return {
       isactive:0,
       worksData: [],// 作品数据
      isThumbFl: true,
      subID:'',
      subChoices:[
        {
          id:'',
          name:'总榜',
        }
      ],

       total:0,     // 记录总条数
       display:6,   // 每页显示条数
       current: 1,   // 当前的页数
       gameID :0,
       choicesID:"",
    }
  },
   components: {
    CHeader: Header,
    DgFooter,
    'v-pagination': pagination,
  },
  computed: {

  
  },
  methods: {
    ready() {
      this.loadWorks();
      this.loadAdminSubLabelData();
    },
    actionWorksDetail(onworksID) {
    this.worksClicks(onworksID);//跳转之前执行点击量增加,执行完后才跳转<code>/cart</code>
    this.$router.push('/worksDetail/'+onworksID)
   },
    //点击量
    worksClicks(onworksID) {
      this.dgpost(this.api.CLICKWORKS, {
        worksID: +onworksID,
      }).then(res => {
        this.res.data;
      }).catch(err => {
        this.alertMsg = err.msg;
      });
    },
     pagechange(currentPage){ //分页点击
        this.current = currentPage;
       // console.log(this.total+"************");
        this.loadWorks();
    },
    loadWorks() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETAdminWORKSLISTBYMPAGE, {
          tagID: this.subID,
          gameID: this.gameID,
          pageNum:	+this.current,
          numPerPage: +this.display,
        }).then(res => {
         // this.page.res = res.data.data.page;
          this.worksData = res.data.data.work;
          this.total=res.data.data.page.total;
            if(this.total==0){this.total=1}
        });
      });
    },
     loadAdminSubLabelData() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GetAdminSubLabelData, {
        }).then(res => {
          this.subChoices = this.subChoices.concat(res.data.data.dataSource);
        });
      });
    },


    /** */
    async goWsDetail(works) {
      await this.$parent.$refs.filter.clearTags();
      this.$route('/worksDetail/' + works.worksID);
    },
     AdminworksCay(SubID,inex2){
      this.isactive=inex2;
       if(this.subID!=SubID){
      this.subID = SubID;
     // console.log("**********************"+this.subID ); 
      this.loadWorks();
      }
      
    }
  },
  
  mounted() {
    this.ready();
  },

  
}

</script>

<style lang="less" scoped>
@max850: ~"screen and (max-width: 850px)";

@media @max850 {
  
}

.dg-panel {
  background-color: #ffffff;
  border: 1px solid #ECECEC;
  border-radius: 3px;
}

.dg-class {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    padding: 10px 20px;
    margin: 5px 0;
    border-left: 3px solid #FFFFFF;
    &:hover {
      .dgactive;
    }
  }
}

.dgactive {
  border-left: 3px solid #ECE0C6 !important;
}

.dg-body {
  background-color: #FFFFFF;
  border-bottom: 1px solid #F1F1F1;
}

.head-img {
  max-width: 50px;
}

.dg-thumb {

}

.dg-dsg-info {
  position: absolute;
  bottom: 0;
}

.dg-detail {
  position: absolute;
  right: 0;
  bottom: 0;

}
</style>
